<template>
  <div class="main">
    <el-container>
      <el-aside width="250px">
        <div class="logo-font" :style="{height: '100vh'}">
          <div class="system_title">百科管理系统</div>
          <div class="left-tree">
             <div class="img-avater"><img src="" alt=""></div>
             <div class="user-name"><span>用户名</span></div>
             <div class="user-model">
                <ul>
                  <li v-for="(item,index) in systemModuleList" :key="index">
                    <el-button type="primary" @click="changepage(item.url)">{{item.name}}</el-button>
                  </li>
                  
                </ul>
             </div>
<!--           
         -->
          </div>
        </div>
      </el-aside>
      <el-main  style="padding:0px;">
        <el-header style="padding:0px;">
          <div class="system_module">
            <el-row>
               <el-col :xs="16" :sm="16" :md="16" :lg="16" :xl="16">
                 <el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
                   <el-input v-model="searchInput"></el-input>
                 </el-col>
                 <el-col :xs="2" :sm="2" :md="2" :lg="2" :xl="2">
                <div>进入词条</div>
              </el-col>
              <el-col :xs="2" :sm="2" :md="2" :lg="2" :xl="2">
                <div>全站搜索</div>
              </el-col>
              </el-col>
              <el-col :xs="6" :sm="6" :md="6" :lg="6" :xl="6" style="text-align:right;">
                <span style="padding:0 10px;display:inline-block;">首页</span>
                 <span style="padding:0 10px;display:inline-block;">退出登录</span>
              </el-col>
            </el-row>
          </div>
        </el-header>
        <el-main><div class="pageMain"> <router-view/></div></el-main>
      </el-main>
    </el-container>
  </div>
</template>

<script>
// import leftTree from '../components/leftTree.vue'
export default {
  name: "HelloWorld",
  components: {
    //  leftTree
  },
  data() {
    return {
      searchInput:'搜索',
      menuVisible: false,  //模态框
      current:0,
      username: "管理员",
      data: [
        {
          id: 1,
          label: "战略",
          children: [
            {
              id: 4,
              label: "战略 1-1"
            }
          ]
        },
        {
          id: 2,
          label: "战术",
          children: [
            {
              id: 5,
              label: "战术 2-1"
            },
            {
              id: 6,
              label: "战术 2-2"
            }
          ]
        },
        {
          id: 3,
          label: "武器 3",
          children: [
            {
              id: 7,
              label: "武器 3-1"
            },
            {
              id: 8,
              label: "二级 3-2"
            }
          ]
        },
        {
          id: 4,
          label: "情报 3",
          children: [
            {
              id: 7,
              label: "情报 3-1"
            },
            {
              id: 8,
              label: "情报 3-2"
            }
          ]
        }
      ],
      defaultProps: {
        children: "children",
        label: "label"
      },
      systemModuleList: [
        //导航标题
        {
          name: "分类维护",
          url: "add-claify",
          index: 1
        },
        {
          name: "属性模板管理",
          url: "attr-template",
          index: 2
        },
        {
          name: "目录模板管理",
          url: "",
          index: 3
        },
        {
          name: "词条管理",
          url: "entry-template",
          index: 4
        },
        {
          name: "数据源管理",
          url: "",
          index: 5
        },
        {
          name: "提取任务管理",
          url: "",
          index: 6
        },
        {
          name: "词条审核",
          url: "",
          index: 7
        },
        {
          name: "专题管理",
          url: "",
          index: 8
        },
        {
          name: "权限管理",
          url: "",
          index: 9
        }
      ]
    };
  },
  methods: {
    //跳转页面
    changepage(url){
      console.log(url)
        this.$router.push({ path: url })
    },
     //鼠标移入
     mousmove(index){
      //  console.log(index)
           this.current=index;
     },
    rightClick(MouseEvent, object, Node, element) {
      // 鼠标右击触发事件
      this.menuVisible = false; // 先把模态框关死，目的是 第二次或者第n次右键鼠标的时候 它默认的是true
      this.menuVisible = true; // 显示模态窗口，跳出自定义菜单栏
      var menu = document.querySelector("#menu");
      menu.style.left = MouseEvent.clientX + 50 + "px";
      document.addEventListener("click", this.foo); // 给整个document添加监听鼠标事件，点击任何位置执行foo方法
      menu.style.top = MouseEvent.clientY - 10 + "px";
      console.log("右键被点击的event:", MouseEvent);
      console.log("右键被点击的object:", object);
      console.log("右键被点击的value:", Node);
      console.log("右键被点击的element:", element);
      console.log("鼠标点击了树形结构图");
    },
    foo() {
      // 取消鼠标监听事件 菜单栏
      this.menuVisible = false;
      document.removeEventListener("click", this.foo); // 要及时关掉监听，不关掉的是一个坑，不信你试试，虽然前台显示的时候没有啥毛病，加一个alert你就知道了
    },
    handleNodeClick() {},
//     // 字符串
// this.$router.push('/home/first')

// // 对象
// this.$router.push({ path: '/home/first' })

// // 命名的路由
// this.$router.push({ name: 'home', params: { userId: wise }})
  
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

.classred{
  background-color: #2c8aea;
}
.logo-font{
  border-right:1px solid #dddddd;
}
.system_module{
  padding:0 10px;
}
.img-avater{width:180px;height:180px;border:1px solid #dddddd;}
.left-tree{padding:20px 32px;}
.user-name{padding:10px 0;}
</style>
